<<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	<article class="prevnext">
		<a class="" href="01.Sample-Boxed.html">01</a>
		<a class="" href="02.Sample-Fullwidth.html">02</a>
		<a class="" href="03.Sample-FullScreen.html">03</a>
		<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
		<a class="" href="05.Sample-Aligns.html">05</a>
		<a class="" href="06.Sample-AlignForce.html">06</a>
		<a class="" href="07.Sample-Videos.html">07</a>
		<a class="" href="08.Sample-NavigationStyle.html">08</a>
		<a class="active" href="09.Sample-Api.html">09</a>
		<a class="" href="10.Sample-LazyLoading.html">10</a>
		<a class="" href="11.Sample-Shuffle.html">11</a>
		<a class="" href="12.Sample-Backgrounds.html">12</a>
		<a class="" href="13.Sample-HideCaptions.html">13</a>
		<a class="" href="14.Sample-KenBurns.html">14</a>
		<a class="" href="15.Sample-VideoBG.html">15</a>
		<a class="" href="16.Caption-ShowDown.html">16</a>
	</article>


	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<article class="boxedcontainer">

			<!--
			#################################
				- THEMEPUNCH BANNER -
			#################################
			-->
			<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

			<div class="tp-banner-container">
				<div class="tp-banner" >
					<ul>
						<!-- SLIDE  -->
						<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
							<!-- MAIN IMAGE -->
							<img src="images/bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">


							<!-- LAYER NR. 1 -->
							<div class="tp-caption medium_bg_asbestos fade"
								data-x="20"
								data-y="20"
								data-speed="500"
								data-start="800"
								data-easing="Power4.easeOut"
								data-endspeed="300"
								data-endeasing="Power1.easeIn"
								data-captionhidden="off"
								style="z-index: 6">Try The Buttons below the Slider
							</div>

							<!-- LAYER NR. 6 -->
							<div class="tp-caption sft customout"
								data-x="center" data-hoffset="134"
								data-y="center" data-voffset="-6"
								data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
								data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
								data-speed="600"
								data-start="1000"
								data-easing="Power4.easeOut"
								data-endspeed="500"
								data-endeasing="Power4.easeOut"
								data-autoplay="false"
								data-autoplayonlyfirsttime="false"
								data-nextslideatend="false"
								style="z-index: 8"><iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0' width='640' height='360' style='width:640px;height:360px;'></iframe>
							</div>


						</li>

						<!-- SLIDE  -->
						<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
							<!-- MAIN IMAGE -->
							<img src="images/bg2.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
							<!-- LAYERS -->
							<!-- LAYER NR. 1 -->
							<div class="tp-caption medium_bg_asbestos fade"
								data-x="20"
								data-y="20"
								data-speed="500"
								data-start="800"
								data-easing="Power4.easeOut"
								data-endspeed="300"
								data-endeasing="Power1.easeIn"
								data-captionhidden="off"
								style="z-index: 6">Try The Buttons below the Slider
							</div>


						</li>

						<!-- SLIDE  -->
						<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
							<!-- MAIN IMAGE -->
							<img src="images/bg3.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
							<!-- LAYERS -->
							<!-- LAYER NR. 1 -->
							<div class="tp-caption medium_bg_asbestos fade"
								data-x="20"
								data-y="20"
								data-speed="500"
								data-start="800"
								data-easing="Power4.easeOut"
								data-endspeed="300"
								data-endeasing="Power1.easeIn"
								data-captionhidden="off"
								style="z-index: 6">Try The Buttons below the Slider
							</div>

						</li>

						<!-- SLIDE  -->
						<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
							<!-- MAIN IMAGE -->
							<img src="images/bg4.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
							<!-- LAYER NR. 1 -->
							<div class="tp-caption medium_bg_asbestos fade"
								data-x="20"
								data-y="20"
								data-speed="500"
								data-start="800"
								data-easing="Power4.easeOut"
								data-endspeed="300"
								data-endeasing="Power1.easeIn"
								data-captionhidden="off"
								style="z-index: 6">Try The Buttons below the Slider
							</div>

						</li>


					</ul>
					<div class="tp-bannertimer"></div>
				</div>
			</div>


			<!--
			###############################
				-	THE API EXAMPLE -
			###############################
			-->
			<div style="width:100%;height:20px"></div>
			<div class="api-examples" style="text-align:center; margin-bottom:20px;">

				<input type="button" id="pause" value="pause">
				<input type="button" id="resume" value="resume">
				<input type="button" id="prev" value="prev">
				<input type="button" id="next" value="next">
				<input type="button" id="show" value="show slide 3">
				<input type="button" id="length" value="length">
				<input type="button" id="current" value="current">
				<input type="button" id="lastslide" value="last played">
				<input type="button" id="redraw" value="redraw">				


			</div>
			<h2 style="text-align:center" class="results" id="callbackinfo">Function Events</h2>
			<h2 style="text-align:center" class="results" id="stopinfo">Slider Loop Events</h2>
			<h2 style="text-align:center" class="results" id="videoinfo">Video Events</h2>
			<h2 style="text-align:center" class="results" id="otherevents">Other Events</h2>
			<h2 style="text-align:center" class="results" id="loadevent">Loaded Events</h2>


			<!-- THE SCRIPT INITIALISATION -->
			<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
			<script type="text/javascript">

				var revapi;

				jQuery(document).ready(function() {

					   revapi = jQuery('.tp-banner').revolution(
						{
							delay:9000,
							startwidth:1170,
							startheight:500,
							hideThumbs:10

						});


						//########################################
					//	-	API HANDLING	-
					//########################################

					// listen for slide change event
					revapi.bind("revolution.slide.onchange",function (e,data) {
						jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex).addClass("changecolor");
						setTimeout(function() {
							jQuery('#callbackinfo').removeClass("changecolor");
						},200)
					});

					revapi.bind("revolution.slide.onpause",function (e,data) {
						jQuery('#callbackinfo').html('Last Event: Timer Pause ').addClass("changecolor");
						setTimeout(function() {
							jQuery('#callbackinfo').removeClass("changecolor");
						},200)
;
					});

					revapi.bind("revolution.slide.onresume",function (e,data) {
						jQuery('#callbackinfo').html('Last Event: Timer Resume ').addClass("changecolor");
						setTimeout(function() {
							jQuery('#callbackinfo').removeClass("changecolor");
						},200)
;
					});

					revapi.bind("revolution.slide.onvideoplay",function (e,data) {
						jQuery('#videoinfo').html('YouTube / Vimeo Video Playing ').addClass("changecolor");
						setTimeout(function() {
							jQuery('#videoinfo').removeClass("changecolor");
						},200);
					});

					revapi.bind("revolution.slide.onvideostop",function (e,data) {
						jQuery('#videoinfo').html('YouTube / Vimeo Video Stopped').addClass("changecolor");
						setTimeout(function() {
							jQuery('#videoinfo').removeClass("changecolor");
						},200);
					});

					revapi.bind("revolution.slide.onstop",function (e,data) {
						jQuery('#stopinfo').html('Slider Stopped ').addClass("changecolor");
						setTimeout(function() {
							jQuery('#stopinfo').removeClass("changecolor");
						},200);
					});

					revapi.bind("revolution.slide.onbeforeswap",function (e) {
						jQuery('#otherevents').html('Slider going to swap').addClass("changecolor");
						setTimeout(function() {
							jQuery('#otherevents').removeClass("changecolor");
						},200);
					});

					revapi.bind("revolution.slide.onafterswap",function (e) {
						jQuery('#otherevents').html('Slider is ready with swap').addClass("changecolor");
						setTimeout(function() {
							jQuery('#otherevents').removeClass("changecolor");
						},200);
					});

					revapi.bind("revolution.slide.onloaded",function (e) {
						jQuery('#loadevent').html('Slider is Loaded').addClass("changecolor");
						setTimeout(function() {
							jQuery('#loadevent').removeClass("changecolor");
						},200);
					});

					// bind to button click
					jQuery("input").click(apiHandler)

					function apiHandler(e) {
						switch (e.currentTarget.id) {
							case "pause":
								revapi.revpause();
							break;
							case "resume":
								revapi.revresume()
							break;
							case "prev":
								revapi.revprev()
							break;
							case "next":
								revapi.revnext()
							break;
							case "show":
								revapi.revshowslide(3);
							break;
							case "length":
								alert(revapi.revmaxslide());
							break;
							case "current":
								alert(revapi.revcurrentslide());
							break;
							case "lastslide":
								alert(revapi.revlastslide());
							break;
							case "redraw":
								revapi.revredraw();
							break;

						}
						return false;
					}

				});	//ready

			</script>

			<!-- END REVOLUTION SLIDER -->


	</article><!-- Content End -->








<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

	<section class="container">
		<h2>What are API and Methods/Events ?</h2>
		<p>An application programming interface (API) specifies how some software components should interact with each other. Slider Revolution use following Methods:</p>
		<div style="width:100%;height:20px"></div>
		<ul style="font-size:13px;line-height:20px;">
			<li>Pause: <span style="color:#e74c3c">revpause()</span></li>
			<li>Resume: <span style="color:#e74c3c">revresume()</span></li>
			<li>Previous Slide: <span style="color:#e74c3c">revprev()</span></li>
			<li>Next Slide: <span style="color:#e74c3c">revnext()</span></li>
			<li>Show Spec. Slide: <span style="color:#e74c3c">revshowslide(slidenr)</span></li>
			<li>Amounts of Slides: <span style="color:#e74c3c">revmaxslide()</span> returns amount of slides</li>
			<li>Current Slide: <span style="color:#e74c3c">revmaxslide()</span> returns current slide nr.</li>
			<li>Last Played Slide: <span style="color:#e74c3c">revlastslide()</span> returns last played slide nr.</li>
		</ul>
		<div style="width:100%;height:20px"></div>
		<p>Slider Revolution Triggers following Events</p>
		<div style="width:100%;height:20px"></div>
		<ul style="font-size:13px;line-height:20px;">
			<li>Slider has been succesfully initialised: <span style="color:#e74c3c">revolution.slide.onloaded</span></li>
			<li>Slider swap between two slides: <span style="color:#e74c3c">revolution.slide.onchange</span>returns as data.slideIndex the next Slide Nr.</li>
			<li>Slider changed to Pause mode: <span style="color:#e74c3c">revolution.slide.onpause</span></li>
			<li>Slider is back from Pause Mode: <span style="color:#e74c3c">revolution.slide.onresume</span></li>
			<li>Video Playing has been started: <span style="color:#e74c3c">revolution.slide.onvideoplay</span></li>
			<li>Video Playing has been stopped: <span style="color:#e74c3c">revolution.slide.onvideostop</span></li>
			<li>Slider stopped: <span style="color:#e74c3c">revolution.slide.onstop</span></li>
			<li>Slider has been called to change the slide (before transition): <span style="color:#e74c3c">revolution.slide.onbeforeswap</span></li>
			<li>Slider has been finnished the Slide Change (after transition): <span style="color:#e74c3c">revolution.slide.onafterswap</span> </li>
		</ul>
	</section>






</body>